<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="hello">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>闭包</title>
  <style type="text/css">
	*{margin:0;padding:0;}
	ul,ol{list-style:none;}
	a{text-decoration:none;}

	
  </style>
 </head>
 <body>
	<div id="box" style="background-color:red">
		<ul>
			<li>001</li>
			<li>002</li>
			<li>003</li>
			<li>004</li>
			<li>005</li>
		</ul>	
	</div>
	<script>
		var ali = document.querySelectorAll("#box ul li");
		//方法一
		/*for(var i=0;i<5;i++){
			ali[i].i = i;
			ali[i].onclick = function(){
				alert(this.i);
			}
		}*/
		//方法二
		/*for(var i=0;i<5;i++){
			(function(i){
				ali[i].onclick = function(){
					alert(i);
				}
			}(i));
		}*/

		//box背景色切换		

		box.onclick = function(){
			(function(clr,ele){
				switch(clr){
					case 'red':
						clr = 'blue';
						break;
					case 'blue':
						clr = 'red';
						break;
				}
				ele.style.backgroundColor = clr;
			}(box.style.backgroundColor,this))
		}
	</script>
 </body>
</html>
